import React, { Component } from "react";
import { connect } from "react-redux";
import "./SetPayPassword.scss";
import yhTools from "../../../tools/yh";
import { InterfaceG } from "../../../config/Config";
import { getPayDatas } from "../../../Redux/Action/nativeDatas/nativeDatas";
import MainLayout from "../../../component/mainLayout/mainLayout";

const showMsgOnce = "请设置支付密码";
const showMsgTwice = "请再次确认支付密码";
// 较弱密码列表
const SimplePwd = [
	"111111",
	"222222",
	"333333",
	"444444",
	"555555",
	"666666",
	"777777",
	"888888",
	"999999",
	"000000"
];
const SimplePwdOther = "0123456789";
const SimplePwdStr = "9876543210";

class SetPayPassword extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showMsg: showMsgOnce,
			inputTextArray: [], // 输入数组
			pwdOnce: "", // 第一次支付密码
			pwdTwice: "", // 第二次输入支付密码
			tips: "",
			backPath: "/xhfHomeCredit"
		};
	}

	componentDidMount() {}

	/**
	 * 键盘点击事件
	 * @param {} number
	 */
	handlerKeyBoard(number) {
		let _tempInpArray = this.state.inputTextArray;
		if (number == "X") {
			// 删除
			if (_tempInpArray.length > 0) {
				_tempInpArray.pop();
			} else {
				return;
			}
		} else if (_tempInpArray.length < 6) {
			_tempInpArray.push(number + "");
		} else {
			return;
		}
		this.inputPwd(_tempInpArray);
	}

	/**
	 * 设置密码
	 *
	 * @param {*} pArray
	 */
	inputPwd(pArray) {
		if (pArray.length == 6) {
			// 判断输入次数
			if (this.state.pwdOnce == "") {
				// 第一次输入
				let _tempPwd = pArray.join("");
				if (this.checkSimplePwd(_tempPwd)) {
					this.setState({
						pwdOnce: "",
						pwdTwice: "",
						inputTextArray: [],
						showMsg: showMsgOnce,
						tips: "密码过于简单"
					});
				} else {
					this.setState({
						pwdOnce: _tempPwd,
						inputTextArray: [],
						showMsg: showMsgTwice
					});
				}
			} else {
				// 第二次输入
				let _tempPwd = pArray.join("");
				if (this.state.pwdOnce == _tempPwd) {
					// 两次输入密码匹配
					this.setState({
						pwdTwice: _tempPwd,
						inputTextArray: pArray
					});
					this.submit();
				} else {
					this.setState({
						pwdOnce: "",
						pwdTwice: "",
						inputTextArray: [],
						showMsg: showMsgOnce,
						tips: "两次密码不一致"
					});
				}
			}
		} else {
			this.setState({
				inputTextArray: pArray,
				tips: ""
			});
		}
	}

	// 筛查简单的密码设置
	checkSimplePwd(e) {
		console.log(e);
		if (
			SimplePwd.indexOf(e) > -1 ||
			SimplePwdOther.indexOf(e) > -1 ||
			SimplePwdStr.indexOf(e) > -1
		) {
			return true;
		} else {
			return false;
		}
	}

	// 提交
	submit() {
		const _this = this;
		let objs = {
			url: InterfaceG.setPwd,
			params: {
				// mobilePhone: this.state.phone,
				tradePwd: this.state.pwdOnce
			},
			_alertShow: false
		};
		yhTools.request(objs).then(resp => {
			if (resp.code == "0") {
				if (_this.props.location.state.comePath === "rechargeAccount") {
					_this.props.history.goBack(); // 默认返回上一页
				} else {
					_this.gotoNext();
				}
			} else {
				_this.setState({
					pwdOnce: "",
					pwdTwice: "",
					inputTextArray: [],
					showMsg: showMsgOnce,
					tips: resp.message
				});
			}
		});
	}

	gotoNext() {
		// 收银台过来
		if (this.props.getAppPlatformsDatas.isFromPayMoney) {
			return yhTools.closePage({ flag: "xhfFacilitySuccessPage" });
		}
		if (this.props.location.state.gotoNext == "edjh") {
			this.props.history.push({
				pathname: `/xhfActiveSuccessPage`
			});
		} else {
			this.props.history.replace({
				pathname: `/payCode`
			});
		}
	}

	render() {
		const headerParams = {
			header: {
				title: "设置支付密码",
				goBackPath:
					this.props.location.state.gotoNext == "edjh" ? "/xhfHomeCredit" : ""
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: "1" // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		return (
			<MainLayout pageParams={headerParams}>
				<div className="SetPayPassword">
					<div className="showMsg">{this.state.showMsg}</div>
					<div className="flex_center input_box">
						<div className="box flex_center">
							{this.state.inputTextArray[0] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[1] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[2] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[3] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[4] && <div className="point"></div>}
						</div>
						<div className="box flex_center">
							{this.state.inputTextArray[5] && <div className="point"></div>}
						</div>
					</div>
					<div className="warnMsg">{this.state.tips}</div>

					<div className="custkeyboard">
						<div className="cell_line"></div>
						<div className="cell">
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 1)}>
								1
							</div>
							<div className="row_line"></div>
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 2)}>
								2
							</div>
							<div className="row_line"></div>
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 3)}>
								3
							</div>
						</div>
						<div className="cell_line"></div>
						<div className="cell">
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 4)}>
								4
							</div>
							<div className="row_line"></div>
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 5)}>
								5
							</div>
							<div className="row_line"></div>
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 6)}>
								6
							</div>
						</div>
						<div className="cell_line"></div>
						<div className="cell">
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 7)}>
								7
							</div>
							<div className="row_line"></div>
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 8)}>
								8
							</div>
							<div className="row_line"></div>
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 9)}>
								9
							</div>
						</div>
						<div className="cell_line"></div>
						<div className="cell">
							<div className="row" id="-"></div>
							<div className="row_line"></div>
							<div className="row" onClick={this.handlerKeyBoard.bind(this, 0)}>
								0
							</div>
							<div className="row_line"></div>
							<div
								className="row"
								onClick={this.handlerKeyBoard.bind(this, "X")}
							>
								X
							</div>
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_getPayDatas: options => {
			dispatch(getPayDatas(options));
		}
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(SetPayPassword);
